<template>
  <div class="box">
    <div class="leftBox">
      <div class="boxItem">
        <img src="../../../../assets/img/icon/ic_car.png" alt="" />
        <span>设备编码</span>
      </div>
      <div class="boxItem">
        <img src="../../../../assets/img/icon/leasedProperty.png" alt="" />
        <span>设备名称</span>
      </div>
      <div class="boxItem">
        <img src="../../../../assets/img/icon/rili.png" />
        <span>设备状态</span>
      </div>
      <div class="boxItem">
        <img src="../../../../assets/img/icon/qunzu.png" alt="" />
        <span>当前班次</span>
      </div>
      <div class="boxItem">
        <img src="../../../../assets/img/icon/verification.png" alt="" />
        <span>工单编码</span>
      </div>
      <div class="boxItem">
        <img src="../../../../assets/img/icon/log.png" alt="" />
        <span>物料编码</span>
      </div>
      <div class="boxItem">
        <img src="../../../../assets/img/icon/AIzhineng.png" alt="" />
        <span>当前操作员</span>
      </div>
    </div>
    <div class="rightBox">
      <div class="boxItem">
        <span>{{ itemDetials.emCode }}</span>
      </div>
      <div class="boxItem">
        <span>{{ itemDetials.emName }}</span>
      </div>
      <div class="boxItem">
        <span v-if="itemDetials.state == 0">待机</span>
        <span v-if="itemDetials.state == 1">正常</span>
        <span v-if="itemDetials.state == 2">故障</span>
        <span v-if="itemDetials.state == 3">离线</span>
      </div>
      <div class="boxItem">
        <span>{{ itemDetials.className }}</span>
      </div>
      <div class="boxItem">
        <span>{{ itemDetials.orderCode }}</span>
      </div>
      <div class="boxItem">
        <span>{{ itemDetials.mcode }}</span>
      </div>
      <div class="boxItem">
        <span>{{ itemDetials.userName }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    itemDetials: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  width: 560px;
  height: 450px;
  justify-content: space-around;
  align-items: center;
  padding: 15px;
}
.leftBox,
.rightBox {
  color: #8993f2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.leftBox {
  width: 50%;
  align-items: flex-start;
  padding: 20px 0px 60px 45px;
}
.rightBox {
  color: #5765e7;
  width: 50%;
  align-items: flex-end;
  padding: 20px 50px 60px 0;
}
.boxItem {
  display: flex;
  span {
    font-size: 16px;
    text-align: left;
  }
  img {
    width: 22px;
    height: 22px;
    margin-right: 5px;
  }
}
</style>
